<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .da span {
            display: inline-block;
            width: 80px;
            height: 40px;
            border: 1px solid black;
            border-radius: 5px;
            background: blue;
            color: #fff;
        }

        .tu .c {
            display: block;
        }


        .tu img {
            width: 300px;
            display: none;
        }

        .da .dd {
            background: orange;
        }
    </style>
</head>

<body>
    <div class="da">
        <span class="dd">大耳朵图图</span>
        <span>蜡笔小新</span>
        <span>火影忍者</span>
    </div>

    <div class="tu">
        <img src="./1.jfif" alt="" class="c">
        <img src="./2.jfif" alt="">
        <img src="./3.jfif" alt="">
    </div>

    <script>
        //1.获取所有span
        let a = document.querySelectorAll('.da span');
        let b = document.querySelectorAll('.tu img');

        //2.循环所有span
        a.forEach(function (aa, bb) {
            //3.给span注册鼠标移入事件
            aa.addEventListener("mouseover", function () {
                //5.循环移除高亮
                a.forEach(function (ff, cc) {
                    //
                    ff.classList.remove('dd');
                    // b[cc].classList.remove('c');

                })
                //4.鼠标移入添加高亮
                aa.classList.add('dd');

                //6.鼠标移入找到对应的索引
                b.forEach(function (rt, yu) {
                    rt.classList.remove('c');
                })
                console.log(b[bb], 111);
                b[bb].classList.add('c');


            })
        })





    </script>
</body>

</html>